<template>
      <h1>商机信息详情</h1>
      <h3>基本信息</h3>
    <hr>

  <div class="common-layout">
          <el-container>
            <!-- 左边栏 -->
            <el-aside width="50%">
              <el-form-item label="机构名称">
      <el-input v-model="form.name01" />
    </el-form-item>
    <el-form-item label="机构地址">
      <el-input v-model="form.name02" />
    </el-form-item>
    <el-form-item label="联系人">
      <el-input v-model="form.name03" />
    </el-form-item>
     <el-form-item label="手机">
      <el-input v-model="form.name04" />
    </el-form-item>
      <el-form-item label="电话">
      <el-input v-model="form.name05" />
    </el-form-item>
    <!-- 国家 -->
    <el-form-item label="国家">
      <el-select v-model="form.region1" placeholder="请选择国家">
        <el-option label="中国" value="中国" />
        <el-option label="海外" value="海外" />
      </el-select>
    </el-form-item>
    <el-form-item label="省份">
      <el-select v-model="form.region2" placeholder="请选择省份">
        <el-option label="陕西省" value="陕西省" />
        <el-option label="广东省" value="广东省" />
      </el-select>
    </el-form-item>
     <el-form-item label="市名">
      <el-select v-model="form.region3" placeholder="请选择市区">
        <el-option label="西安市" value="西安市" />
        <el-option label="宝鸡市" value="宝鸡市" />
         <el-option label="深圳市" value="深圳市" />
        <el-option label="惠州市" value="惠州市" />
      </el-select>
    </el-form-item>

     </el-aside>
     <!-- 右边区域 -->
     <el-main>
<el-form-item label="邮编">
      <el-input v-model="form.name06" />
    </el-form-item>
    <el-form-item label="网站">
      <el-input v-model="form.name07" />
    </el-form-item>
     <el-form-item label="机构级别">
      <el-select v-model="form.region4" placeholder="请选择机构级别">
        <el-option label="党政" value="党政" />
        <el-option label="企业" value="企业" />
        <el-option label="学校" value="学校" />
        <el-option label="政府" value="政府" />
        <el-option label="其他" value="其他" />
      </el-select>
    </el-form-item>
    <el-form-item label="行业类别">
      <el-select v-model="form.region5" placeholder="请选择行业类别">
        <el-option label="党政军企" value="党政军企" />
        <el-option label="高职高专" value="高职高专" />
        <el-option label="211学校" value="211学校" />
        <el-option label="民办独立" value="民办独立" />
      </el-select>
    </el-form-item>
    <el-form-item label="重要级别">
      <el-select v-model="form.region6" placeholder="请选择重要级别">
        <el-option label="一般" value="一般" />
        <el-option label="重要" value="重要" />
        <el-option label="很重要" value="很重要" />
        <el-option label="非常重要" value="非常重要" />
      </el-select>
    </el-form-item>
     <el-form-item label="单位等级">
      <el-select v-model="form.region7" placeholder="请选择单位等级">
        <el-option label="一级" value="一级" />
        <el-option label="二级" value="二级" />
        <el-option label="三级" value="三级" />
        <el-option label="四级" value="四级" />
      </el-select>
    </el-form-item>
     <el-form-item label="区域等级">
      <el-select v-model="form.region8" placeholder="请选择区域等级">
        <el-option label="省级" value="省级" />
        <el-option label="市级" value="市级" />
        <el-option label="区级" value="区级" />
        <el-option label="县级" value="县级" />
      </el-select>
    </el-form-item>
     </el-main>
          </el-container>
  </div>
    <el-form :model="form" label-width="120px">
    
   
    
     
     
    <!-- 其他信息 -->
      <h3>其他信息</h3>
      <hr>

  <div class="common-layout">
    <el-container>
      <el-aside width="50%">
 <el-form-item label="经办人">
      <el-input v-model="form.name08" />
    </el-form-item>
    <el-form-item label="年费">
      <el-input v-model="form.name09" />万
    </el-form-item>
     <el-form-item label="电子资源经费">
      <el-input v-model="form.name10" />万
    </el-form-item>


    <el-form-item label="采购时间">
      <el-col :span="11">
        <el-date-picker
          v-model="form.date1"
          type="date"
          placeholder="请选择时间"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>

     <el-form-item label="采购级别">
      <el-select v-model="form.region9" placeholder="请选择采购级别">
        <el-option label="不确定" value="不确定" />
        <el-option label="重要" value="重要" />
        <el-option label="一般" value="一般" />
        <el-option label="跟进" value="跟进" />
      </el-select>
    </el-form-item>
     <el-form-item label="采购方式">
      <el-select v-model="form.region10" placeholder="请选择采购方式">
        <el-option label="不确定" value="不确定" />
        <el-option label="单独采购" value="单独采购" />
        <el-option label="联合采购" value="联合采购" />
      </el-select>
    </el-form-item>
      </el-aside>
      <!-- 其他信息-右边区域 -->
      <el-main>
        <el-form-item label="采购途径">
      <el-select v-model="form.region11" placeholder="请选择采购途径">
        <el-option label="不确定" value="不确定" />
        <el-option label="直接采购" value="直接采购" />
        <el-option label="招标采购" value="招标采购" />
        <el-option label="代理采购" value="代理采购" />
      </el-select>
    </el-form-item>

     <el-form-item label="分配情况">
      <el-select v-model="form.region12" placeholder="请选择分配情况">
        <el-option label="未分配" value="未分配" />
        <el-option label="已分配" value="已分配" /> 
      </el-select>
    </el-form-item>

     
      <el-form-item label="商机状态">
      <el-select v-model="form.region15" >
        <el-option label="初步接洽" value="初步接洽" />
      </el-select>
    </el-form-item>

    <el-form-item label="备注信息">
      <el-input v-model="form.desc1" type="textarea" />
    </el-form-item>

    <el-form-item label="合同信息">
      <el-input v-model="form.desc2" type="textarea" />
    </el-form-item>

    <el-form-item label="产品信息">
      <el-input v-model="form.desc2" type="textarea" />
    </el-form-item>

      </el-main>
    </el-container>
  </div>


    
  
   

   

    <el-form-item>
      <el-button type="primary" @click="onSubmit">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang='ts' setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<style>
 h1{
  font-size: 28px;
  text-align: center;
  margin: 50px 0; 
}
</style>